<template>
  <d2-container>
    <template slot="header">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="操作人">
          <el-input v-model="searchForm.operator" placeholder="请输入操作人"></el-input>
        </el-form-item>
        <el-form-item label="操作类型">
          <el-select v-model="searchForm.operationType" placeholder="请选择操作类型">
            <el-option label="全部" value=""></el-option>
            <el-option label="登录" value="login"></el-option>
            <el-option label="充值" value="recharge"></el-option>
            <el-option label="抄表" value="meter_reading"></el-option>
            <el-option label="设备管理" value="device_manage"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="操作时间">
          <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </template>
    
    <el-table
      :data="tableData"
      v-loading="loading"
      style="width: 100%">
      <el-table-column
        prop="operator"
        label="操作人"
        width="120">
      </el-table-column>
      <el-table-column
        prop="operationType"
        label="操作类型"
        width="120">
        <template slot-scope="scope">
          {{ getOperationTypeText(scope.row.operationType) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="operationContent"
        label="操作内容"
        min-width="200">
      </el-table-column>
      <el-table-column
        prop="operationTime"
        label="操作时间"
        width="180">
      </el-table-column>
      <el-table-column
        prop="ipAddress"
        label="IP地址"
        width="140">
      </el-table-column>
      <el-table-column
        prop="result"
        label="操作结果"
        width="100">
        <template slot-scope="scope">
          <el-tag :type="scope.row.result === 'success' ? 'success' : 'danger'">
            {{ scope.row.result === 'success' ? '成功' : '失败' }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>
    
    <template slot="footer">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total">
      </el-pagination>
    </template>
  </d2-container>
</template>

<script>
import faker from 'faker'

export default {
  name: 'SystemOperationLog',
  data () {
    return {
      loading: false,
      searchForm: {
        operator: '',
        operationType: '',
        dateRange: []
      },
      tableData: [],
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    getList () {
      this.loading = true
      // 模拟数据
      const operationTypes = ['login', 'recharge', 'meter_reading', 'device_manage']
      const operationContents = {
        login: '用户登录系统',
        recharge: '为租户充值',
        meter_reading: '电表抄表操作',
        device_manage: '设备管理操作'
      }
      
      const data = {
        totalCount: 200,
        pageSize: 10,
        totalPage: 20,
        currPage: this.pagination.currentPage,
        list: Array.from({ length: 10 }, (_, index) => {
          const operationType = operationTypes[faker.random.number(operationTypes.length - 1)]
          return {
            id: index + 1,
            operator: faker.name.findName(),
            operationType,
            operationContent: operationContents[operationType],
            operationTime: faker.date.recent().toISOString().replace('T', ' ').split('.')[0],
            ipAddress: faker.internet.ip(),
            result: faker.random.boolean() ? 'success' : 'failure'
          }
        })
      }
      this.tableData = data.list
      this.pagination.total = data.totalCount
      this.loading = false
    },
    getOperationTypeText (type) {
      const texts = {
        login: '登录',
        recharge: '充值',
        meter_reading: '抄表',
        device_manage: '设备管理'
      }
      return texts[type] || '未知'
    },
    handleSearch () {
      this.pagination.currentPage = 1
      this.getList()
    },
    handleReset () {
      this.searchForm = {
        operator: '',
        operationType: '',
        dateRange: []
      }
      this.pagination.currentPage = 1
      this.getList()
    },
    handleSizeChange (val) {
      this.pagination.pageSize = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.pagination.currentPage = val
      this.getList()
    }
  }
}
</script>

<style scoped>
.demo-form-inline .el-form-item {
  margin-bottom: 10px;
}
</style>

